<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="utf-8" />
	<title>GeoGebra Classic</title>
	<link rel="shortcut icon" href="https://www.geogebra.org/apps/icons/geogebra.ico" type="image/x-icon">
	<link rel="icon" href="https://www.geogebra.org/apps/icons/geogebra.ico" type="image/x-icon">
	<meta property="og:title" content="GeoGebra 经典 - GeoGebra" />
	<!--APPSTORE BANNER-->
	<link rel="preconnect" href="https://cdn.geogebra.org">
	<link rel="preconnect" href="https://www.google-analytics.com">
	<script type="text/javascript">
		// for IE9
		if (!window.console) window.console = {};
		if (!window.console.log) window.console.log = function () { };

		var latestVersion="5.0.580.0";
		var module = "web3d";
		var defaultParams = {"vendor":"GeoGebra", "preloadModules":""};
		var prerelease = false;
		var debug = false;
		var startDelay = 0;
		var marginTop = 0;
		var analyticsVersion = 'V'+latestVersion;
		var appOnline=true;
		var translation = {};
		var codebase = "https://www.geogebra.org/apps/latest/";
	</script>
	<script>prerelease=false;appOnline=true;</script>
	<meta name="description" content="在线免费的 GeoGebra 应用程序包: 将绘图、几何、代数、3D、统计、概率等集成在一起!">

	<link rel="canonical" href="https://www.geogebra.org/classic"/>
	<link rel="alternate" hreflang="zh-CN" href="https://www.geogebra.org/classic?lang=zh-CN" />
	<link rel="alternate" hreflang="en" href="https://www.geogebra.org/classic?lang=en" />

	<script>
		function e(id){
			return document.getElementById(id);
		}
		function c(className){
			return document.getElementsByClassName(className)[0];
		}
		var finalLang = null;
		
		function setParamFromURL(paramName){
			if (getURLparam(paramName)) {
				e("ggw").setAttribute("data-param-"+paramName,getURLparam(paramName));
			}
		}

		function changeMetaTitle(titleBase){
			var title = titleBase.match(/GeoGebra/) ? titleBase : titleBase + " - GeoGebra";
			var tag = document.querySelector("meta[property='og:title']");
			if (tag && tag.setAttribute) {
				tag.setAttribute("content", title);
			}
			document.title = title;
		}

		function isAppSupportingPerspective(idString){
			if (!window.appID || window.appID == "classic") {
				return true;
			}
			// only search supported in unbundled apps & notes
			return idString.substring(0,6) == "search";
		}

		function perspective(id, name){
			if(e("ggw")){			
				e("ggw").className="geogebraweb";

				e("ggw").setAttribute("data-param-appname", window.appID || "classic");

				if(id){
					if ((id+"").substring(0,4) == "exam") {
						e("ggw").setAttribute("data-param-enableGraphing","true");
					}
					if (isAppSupportingPerspective(id + "")) {
						e("ggw").setAttribute("data-param-perspective", id);
						if (c("mowToolbar")) {
							c("mowToolbar").style.display = "none";
						}
					}
				}
				setParamFromURL("filename");
				setParamFromURL("rounding");
				setParamFromURL("ggbbase64");
				if(location.pathname.match(/lti/)){
					e("ggw").setAttribute("data-param-showAppsPicker","false");
					e("appsPicker") && e("appsPicker").style.setProperty("display", "none");
					c("GeoGebraHeader") && c("GeoGebraHeader").remove();
					e("ggw").setAttribute("data-param-marginTop",0);
				}
				if(window.ggbRerun){
					ggbRerun();
				}
			}else{
				if(id){
					ggbApplet.setPerspective(id+"");
				}
			}
			var label = e(name);
			if(label){
				parentTable(label).className += " perspectiveHighlighted";
			}
			if (name && window.history && window.history.pushState && name != "picker" && location.host.indexOf("geogebra") >= 0 &&
					location.href.indexOf("?") < 0 && !location.pathname.match(/\/.*\/.+/) && !isLocalhost()){
				var unbundled = ["graphing", "geometry", "whiteboard", "notes", "3d", "cas",
					"scientific", "calculator", "suite"].indexOf(name) >= 0;
				if (name != "classic" && (location.pathname.indexOf("classic") > 0 || !unbundled)) {
					name = "classic#" + name;
				}
				history.pushState({}, "GeoGebra", "/"+name);
			}
			return false;
		}
		
		function div(styleName){
			var ret = document.createElement("div");
			ret.className = styleName;
			return ret;
		}

		function getLocalStorage(key){
			try{
				if(location.host && window.localStorage){
					return localStorage.getItem(key);
				}
			} catch(e){
				//local storage not supported
			}
			return false;
		}
		
		function setLocalStorage(key, value){
			try{
				if(location.host && window.localStorage){
					return localStorage.setItem(key, value);
				}
			} catch(e){
				//local storage not supported
			}
		}

		function getCookieUnsafe(cookieName){
			var crumbs = document.cookie.split(';');
			for (var i = 0; i < crumbs.length; ++i) {
				var nameAndValue = crumbs[i].trim().split("=");
				if (nameAndValue[0] == cookieName) {
					//may throw an exception
					return decodeURIComponent(nameAndValue[1]);
				}
			}
			return false;
		}

		function getCookie(cookieName){
			try {
				return getCookieUnsafe(cookieName);
			} catch (e) {
				// ignore error, keep undecoded value
			}
			return false;
		}

		function parentTable(ret){
			var parent = ret;
			while(parent = parent.parentElement){
				if(parent.tagName == "TABLE"){
					return parent;
				}
			}
			return ret;
		}

		function button(id, perspectiveId, caption){
			var shortId = id.replace("perspective","");
			if(getPerspective() == shortId){
				changeMetaTitle(caption);
			}
			var ret = e(id);
			if (!ret) {
				return;
			}
			var parent = parentTable(ret);		
			
			parent.addEventListener("click",function(){
				if(e("ggw")){
					e("ggw").setAttribute("data-param-showAppsPicker","false");
				}
				changeMetaTitle(ret.innerText);
				perspective(perspectiveId,id.replace("perspective",""));
			});
			
			ret.innerHTML = caption;
		}

		function setPickerLabels(dict){
			button("graphing", 1, dict["Graphing"] || "Graphing");
			button("geometry", 2, dict["Perspective.Geometry"] || "Geometry");
			button("cas", 4, dict["Perspective.CAS"] || "CAS Calculator");
			button("spreadsheet",  3, dict["Perspective.Spreadsheet"] || "Spreadsheet Calc");
			button("perspective3d", 5, dict["GeoGebra3DGrapher.short"] || "3D Calculator");
			button("probability", 6, dict["Perspective.Probability"] || "Probability Calc");

			button("exam","exam", dict["exam_menu_entry"] || "Exam Calculator");
			e("create").innerHTML = dict["CreateYourOwn"] || "GeoGebra Classic";
			if(e("download")){
				e("download").innerHTML = dict["Download"] || "Download";
			}
			if(e("tutorialLink")){
				e("tutorialLink").href = "https://www.geogebra.org/m/"+dict["TutorialClassic"];
			}
		}

		function showInLang(lang){
			var props = __GGB__keysVar[lang];
			if (window.appID === "suite") {
				changeMetaTitle(props.menu["CalculatorSuite"] || "Calculator Suite")
			}
			if(window.appID === "graphing"){
				changeMetaTitle(props.menu["GraphingCalculator"] || "Graphing Calculator");
			}
			if(window.appID === "geometry"){
				changeMetaTitle(props.menu["Geometry"]  || "Geometry");
			}
			if(window.appID === "CAS"){
				changeMetaTitle(props.menu["CASCalcultor"]  || "CAS Calculator");
			}
			if(window.appID === "3D"){
				changeMetaTitle(props.menu["Graphing3D"]  || "3D Graphing Calculator");
			}
			if(!window.appID && !getPerspective()){
				changeMetaTitle(props.menu["math_apps"]  || "GeoGebra Classic");
			}
			document.body.parentNode.style.overflow = "auto";
			if(e("ggbPage")){
				e("ggbPage").style.display = "";
			}
			
			if(finalLang && finalLang != lang){
				console.log("wrong lang");
				return;
			}		
			if(e("ggbPage")){
				setPickerLabels(props.menu);
			}
		}
		
		function showInEnglish(){
				if(!window.__GGB__keysVar && e("ggbPage")){
					setPickerLabels({});
		
					e("ggbPage").style.display="";
				}
				
			}
		var langs = ["af",  "ar",  "ar-MA",  "ar-TN",  "bg",  "bs",  "ca",  "ca-XV",  "cs",  "cy",  "da", 
		"de-AT",  "de",  "el",  "en-AU",  "en-GB",  "en",  "eo",  "es-ES",  "es",  "es-UY",  "et",  "eu", 
		"fa",  "fi",  "fr",  "gl",  "hi",  "hr",  "hu",  "hy",  "in",  "is",  "it",  "he",
		"ja",  "yi",  "ka",  "kk",  "km",  "kn",  "ko",  "lt",  "lv",  "mk",  "ml",  "mn",  "mr",  "ms", 
		"ne",  "nl-NL",  "nl",  "no",  "nb",  "nn",  "pl",  "pt",  "pt-PT",  "ro",  "ru",  "si",
		"sk",  "sl",  "sq",  "sr",  "sv",  "ta",  "tg",  "th",  "fil",  "tr",  "ty",  "ug",  "uk", 
		"ur",  "vi",  "xh",  "zh-CN", "zh-TW"];
		
		function validLang(lang){
			lang=lang.replace("_","-").replace("tl","fil").replace("ji","yi").replace("no-NO-NY","nn");
			if(lang.substring(0,2) == "no"){
				lang = "nb";
			}
			if(lang.substring(0,2) == "zh"){
				lang = lang.indexOf("TW") > 0 || lang.indexOf("Hant") > 0 ? "zh-TW" : "zh-CN";
			}
			if(langs.indexOf(lang) >= 0){
				return lang;
			}
			lang = lang.substring(0,2);
			if(langs.indexOf(lang) >= 0){
				return lang;
			}
			return "en";
		}
		function getURLparam(param){
			var parts = location.href.split("?");
			if(parts.length<2){
				return null;
			}
			params=parts[1].split("&");
			for(var i=0;i<params.length;i++){
				if(params[i].indexOf(param + "=")==0){
					return params[i].substring(param.length + 1);
				}
			}
			return null;
		}
		function switchLang(lang){
			var storedTranslation = {};
			if(getLocalStorage("translation")){
				try { 
					storedTranslation = JSON.parse(localStorage.translation);
				}
				catch(e){
					console.log(e.message);
				}
			}
			if(storedTranslation[lang] && storedTranslation["version"] == latestVersion){
				window.__GGB__keysVar = {};
				window.__GGB__keysVar[lang] = storedTranslation[lang];
				window.__GGB__keysVar["version"] = storedTranslation["version"];
				showInLang(lang);
			}
			else{
				var l10n = document.createElement("script");
				document.head.appendChild(l10n);
				l10n.onload = function(){
				
				
					showInLang(lang);
					if(window.__GGB__keysVar[lang]){
						var obj = {};
						obj["version"] = latestVersion;
						obj[lang] = window.__GGB__keysVar[lang];
						setLocalStorage("translation", JSON.stringify(obj));
					}
					
				}
				var propertiesCodebase = codebase.replace("/latest", "/"+latestVersion);
				l10n.setAttribute("src", propertiesCodebase + module+"/js/properties_keys_" + lang + ".js");
			}
		}

		function insertScript(){
			if (window.loadFontScript) {
				window.loadFontScript(codebase + module);
			}
			app = document.createElement("script");
			app.setAttribute("src",codebase+module+"/"+module+".nocache.js");
			window.setTimeout(function(){
				document.head.appendChild(app);
			}, startDelay);
		}

		function isLocalhost(){
			return location.protocol.match(/(chrome|app|file:)/) || location.host.match(/^([0-9.]*|(autotest|deploy).*geogebra.org|localhost|apps-builds.s3.*.amazonaws.com)(:.+)?$/);
		}

		function showStartScreen(){
			var lang = getURLparam("lang") || getCookie("GeoGebraLangUI") || getLocalStorage("GeoGebraLangUI") || navigator.language || "en";
			window.setTimeout(showInEnglish, 1000);
			switchLang(validLang(lang));
		}

		function setPrerelease(prereleaseParam){
			document.body.className += "prerelease";
			e("ggw").setAttribute("data-param-prerelease",prereleaseParam);
			e("ggw").setAttribute("data-param-showlogging",true);
		}
		
		function setDebug(debugParam){
			e("ggw").setAttribute("data-param-showlogging",debugParam);
		}
		
		function getPerspective(){
			if (getURLparam("perspective")) {
				return getURLparam("perspective");
			}
			var parts = location.pathname.split("/");
			var path = parts.length == 1 || parts[parts.length-1].length? parts[parts.length-1] : parts[parts.length-2] ;
			if (location.hash.length || (path != '/apps' && path != '/apps/' && !path.match(/\.html$/))) {
				return location.hash.length ? location.hash.replace('#','') : path;
			}
			return window.appID;
		}

		function resizeStart(){
			if(e("perspectivesBox")){
				if(window.innerHeight < 650 || window.innerWidth < 650){
					e("perspectivesBox").style.display = "none";
				} else {
					e("perspectivesBox").style.top= (Math.max(0,Math.round(window.innerHeight/2 -250))-53)+"px";
				}
			}
		}

		function updateAppletParams(){
			for (var key in defaultParams) {
				e("ggw").setAttribute("data-param-" + key, defaultParams[key]);
			}
			if (location.host.indexOf("beta") == 0 || getURLparam("prerelease") || prerelease) {
				setPrerelease(prerelease || "true");
			}
			if (getURLparam("debug") || debug || isLocalhost()) {
				setDebug(debug || true);
			}
		}

		function loadMaterial(tubeid){
			e("ggw").setAttribute("data-param-tubeid", tubeid);
			if(window.addAppletPreview){
				window.addAppletPreview(tubeid);
			}
			perspective(false);
			insertScript();
		}

		/** @return array [whole URL, appName, sandbox, material ID]*/
		function getParametersFromPath(){
			return location.pathname.match(/^\/(o|classic|graphing|suite|geometry|3d|([a-z]+\/)?frame|notes|cas|calculator)\/([a-zA-Z0-9]+)/);
		}

		function loadApp(){
			if(isLocalhost()) {
				defaultParams.backendURL = "https://api-beta.geogebra.org/v1.0";
			}

			var names = {'geometry':2, 'spreadsheet':3, 'cas':4, '3d':5, 'probability':6, 'graphing':1, 'whiteboard':7,'calculator':8};
			var tubeid = getURLparam("id");
			var checkId = getParametersFromPath();
			if(checkId && !names[checkId[3]]){
				tubeid = checkId[3];
				if (checkId[1] == "o") {
					appID = "auto";
				}
			}

			var skipAppsPicker = getURLparam("command") || getURLparam("state") || getURLparam("filename");
			resizeStart();
			window.addEventListener && window.addEventListener("resize", resizeStart);
			if (e("ggw")) {
				updateAppletParams();
			}
			
			if (tubeid) {
				if (e("ggw")) {
					loadMaterial(tubeid);
					return;
				}
			} else if (getPerspective()) {
				var pName = getPerspective();
				if (pName.substring(0,6) == "search" || pName.substring(0,4) == "exam") {
					if (e("perspectivesBox")) {
						e("perspectivesBox").style.display = "none";
					}
					perspective(pName);
				} else {
					perspective(names[pName], pName);
				}
				document.body.className += " " + pName;
				document.body.className += " " + module;
				insertScript();
				showStartScreen();
				return;
			} else if(skipAppsPicker) {
				perspective(false);
				insertScript();
				return;
			}
			
			showStartScreen();
			insertScript();
			perspective(false, "picker"); //TODO
		}
	</script>
	<script type="text/javascript">
		// test to see if the app is running as a chrome webapp
		document.isChromeWebapp = function isChromeWebapp() {
			if (typeof chrome === 'object' && 
				typeof chrome.app === 'object' && 
				typeof chrome.app.isInstalled === 'boolean' && 
				chrome.app.isInstalled) {
				return true;
			}
			return false;
		};
	</script>

    <script>
		function addAppletPreview(tubeid){
			var previewDiv = document.createElement("div");
			previewDiv.id = "ggbsplash";
			previewDiv.style.zIndex = 1000;
			var preview = document.createElement("img");
			preview.style.margin = "auto";
			preview.style.position = "absolute";
			
			var xhr = new XMLHttpRequest();
			var materialHost = isLocalhost() ? "https://beta.geogebra.org":"";
			xhr.open("GET", materialHost + "/api/material_preview.php?u="+tubeid);
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.response) {
					preview.addEventListener && preview.addEventListener("load",function(){
					preview.style.top=(window.innerHeight/2-preview.height/2)+"px";
					preview.style.left=(window.innerWidth/2-preview.width/2)+"px";
					c("logo") && c("logo").style.setProperty("display", "none");
				});
					preview.src = xhr.response.replace("http:","https:");
				}
			};
			xhr.send();
			
			previewDiv.appendChild(preview);
			document.body.appendChild(previewDiv);
		}

	</script>
	<!-- Google Analytics (Start) -->
	<script type="text/javascript">
	window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
	if(window.installAnalytics){
		window.installAnalytics('UA-1780044-1');
	} else {
		ga('create','UA-1780044-1','auto');
	}
	
	ga('send', 'pageview');
	
	var gaPrefixes = {"graphing":"Graphing", "geometry":"Geometry"};
	var gaLabel = gaPrefixes[window.appID] || "Classic";
	gaLabel += appOnline ? " Web" : " Offline";	
	ga('send', 'event', 'Startup', analyticsVersion, gaLabel);
	</script> 
	<script async src='https://www.google-analytics.com/analytics.js'></script>
 	<!-- Google Analytics (End) -->

    <script>
	    var GGW_appengine = GGW_appengine || {};
	    GGW_appengine.FILE_IDS = [""];
	    GGW_appengine.CLIENT_ID = "";
	    GGW_appengine.USER_EMAIL = "";
  	</script>
		    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
    <style>
	    body {
	        touch-action: none;
	        -ms-touch-action: none; /* Direct all pointer events to JavaScript code. */
	        -ms-user-select: none;
	        -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* avoid flash on Android http://stackoverflow.com/questions/5210481/*/
	        color: #666666;
	        font-size: 14px;
	        font-family: sans-serif;
	        margin: 0px;
	        padding: 0px;
	        position: fixed;
	        top:0;
	        width:100%;
	        height:100%;
	    }
		.application #ggbPage{
		 display:none;
		}

		.startScreen{
		    line-height: 120%;
		}

		.startScreen td{
		padding:0;
		}
		.startScreen table{
		border-spacing:0;
		}

		/** from LESS */
		.perspectivesBox{
			width: 250px;
			position: absolute !important;
		    right: 0px !important;
		    left: auto !important;
		    /* float: right; */
		    
		}
		.perspectivesCaption{
			color: #6161FF !important;
		}
		.perspectivesMainPanel{
			width: 250px;
		}
		.perspectivesRow{
			float: left;
			padding-top: 7px;
		    padding-bottom: 7px;
		    text-align: left;
			cursor: pointer;
			display: block;
		}
		.perspectivesRow img{
			padding-right: 10px;
			padding-left: 5px;
		}

		.perspectiveHighlighted{
			background-color: #F0F0FF;
		}
		.perspectivesMargin{
			margin-bottom: 15px;
		}
		.perspectivesRow:hover{
			background-color: #CCCCFF;
		}
		.perspectivesHelp{
			position: absolute;
		    right: 10px;
			cursor: pointer;
			width: 20px;
		    height: 20px;
		}

		.dialogContent table {
		    width: 100%;
		}

		.upperBorder{
		    padding-top: 10px;
		    padding-bottom: 0px;
		    border-top: 1px solid #DCDCDC;
		}
		.upperBorder div{
			padding-top: 3px;
		}

		.DialogBox, .gwt-DialogBox {
		    z-index: 501;
		    /* box-shadow: 1px 1px 6px 1px #666666; */
		    background-color: rgba(255, 255, 255, 0.9);
		    border-radius: 2px;
		    -moz-border-radius: 2px;
		    -webkit-border-radius: 2px;
		    box-shadow: 0px 0px 2px 1px rgba(102, 102, 102, 0.3);
		    padding: 15px;
		}

		.gwt-DialogBox .Caption {
		    cursor: default;
		    font-family: geogebra-sans-serif, Arial Unicode MS, Arial, sans-serif;
		    font-size: 110%;
		    /* padding: 10px; */
		    padding-bottom: 5px;
		    color: #333333;
		    border-bottom: 1px solid #DCDCDC;
		    margin-bottom: 15px;
		}

		.storeIconHolder {
			width: 100%;
		}

		.storeIconHolder a, .storeIconHolder a:visited {
			display: inline-block;
			vertical-align: middle;
			padding-top: 10px;
			color:#666;
			font-size:16px;
			text-decoration: none;
		}

		.storeIconHolder .separatorDiv {
			clear: both;
		}

		.storeIconHolder a img:hover {
			background-color: #FFFFFF;
			opacity: 0.7;
		}

		.storeIconHolder .separatorDiv {
			clear: both;
			border-top: 1px solid #DCDCDC;
		}
		.downloadimg{
			position: absolute;
			left: 20px;
			opacity: 0.7;
		}
		.downloadlink{
			margin-left: 39px;
			vertical-align: middle;
			line-height: 24px;
		}

		/** TOOLBAR */
		.GeoGebraFrame .toolbarPanel .toolBPanel ul{
		margin:0;
		padding:0;
		}
		.GeoGebraFrame .toolbarPanel .toolBPanel li.toolbar_item{
		margin: 0px 5px 0px 0px;
		    text-align: center;
		    position: relative;
		    width: 40px;
		    height: 40px;
		    display: block;
		    float: left;
		    float: left;
		    float: left;
		    list-style-type: none;
		    cursor: pointer;
		}

		.GeoGebraFrame .toolbarPanel .toolBPanel .toolbar_button {
		     -webkit-border-radius: 5px;
		    -khtml-border-radius: 5px;
		    -moz-border-radius: 5px;
		    border-radius: 5px;
		    border: 1px solid #dcdcdc;
		    background-color: #ffffff;
		    padding: 3px;
		    width: 32px;
		    height: 32px;
		}

		.GeoGebraFrame .toolbarPanel {
		    background-color: #f8f8f8;
		    border-bottom: 1px solid #dcdcdc;
		    -webkit-box-shadow: 0px 0px 2px rgba(204, 204, 204, 0.5);
		    -moz-box-shadow: 0px 0px 2px rgba(204, 204, 204, 0.5);
		    box-shadow: 0px 0px 2px rgba(204, 204, 204, 0.5);
		    -webkit-box-shadow: 0px 0px 2px rgba(204, 204, 204, 0.5);
		    -moz-box-shadow: 0px 0px 2px rgba(204, 204, 204, 0.5);
		    box-shadow: 0px 0px 2px rgba(204, 204, 204, 0.5);
		    -webkit-box-shadow: 0px 0px 2px rgba(204, 204, 204, 0.5);
		    -moz-box-shadow: 0px 0px 2px rgba(204, 204, 204, 0.5);
		    box-shadow: 0px 0px 2px rgba(204, 204, 204, 0.5);
		    padding: 5px;
		    box-sizing: border-box;
		    -webkit-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    box-sizing: border-box;
		    -webkit-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    box-sizing: border-box;
		    -webkit-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    z-index: 100;
		}

		.GeoGebraFrame .toolbarPanel{
		 height:53px;
		}
		.ggbPageContent{
			bottom: 0;
		    position: absolute !important;
		    right: 0;
		    top: 53px;
		    left: 0;
		}
		/** KEYBOARD */

		/* ### onScreenKeyboard ### */


		/** input */
		.startScreen .clearButtonWrapper{
			float:right;
			margin-top:18px;
			margin-right:10px;
			opacity:0.3;
		}

		.NewRadioButtonTreeItemParent.startScreen .latexEditor>div{
		display:inline-block;
		}

		.NewRadioButtonTreeItemParent.startScreen {
		position:absolute;
		top:53px;
		border-bottom:1px #dcdcdc solid;
		width:20%;
		}

		.rightButtonPanel{
		 float:right;
		}

		.rightButtonPanel.startScreen img{
		 margin-top:6px;
		 margin-right:11px;
		}

		.toolbarPanel.startScreen img{
		 opacity:0.3;
		}
		/** Start scren splitter**/
		.startScreen.splitter{
		position: absolute; 
		overflow: hidden; 
		left: 20%; 
		top: 53px; 
		bottom: 0px; 
		width: 8px; 
		background-color:#f8f8f8; 
		border:1px solid #dcdcdc
		}

		.toolBPanel.cas{
		 display:none;
		}

		/** perspective specific */
		.exam-simple .startScreen .toolBPanel, .exam-simple .startScreen.splitter  {
		    display: none;
		}

		.exam-simple  .NewRadioButtonTreeItemParent.startScreen  {
		    width: 100%;
		}

		.cas  .NewRadioButtonTreeItemParent.startScreen, .exam-cas  .NewRadioButtonTreeItemParent.startScreen  {
		    width: 50%;
		}

		.cas .startScreen.splitter, .exam-cas .startScreen.splitter  {
		    left: 50%;
		}

		.geometry .startScreen.splitter,
		.geometry .startScreen.gwt-TreeItem   {
		    display: none;
		}

		.whiteboard .startScreen.splitter,
		.whiteboard .startScreen.gwt-TreeItem,
		.whiteboard #appsPicker {
		    display: none;
		}
		.cas .toolBPanel.cas, .exam-cas .toolBPanel.cas{
		 display:block;
		}

		.cas .startScreen .toolBPanel.graphics, .exam-cas .startScreen .toolBPanel.graphics{
		 display:none;
		}

		.exam-simple .startScreen .rightButtonPanel img:nth-child(1),
		.exam-cas .startScreen .rightButtonPanel img:nth-child(1),
		.exam-graphing .startScreen .rightButtonPanel img:nth-child(1),
		.exam .startScreen .rightButtonPanel img:nth-child(1){
		  display: none;
		}

		.tablet3d .examPerspectiveRow, .tablet .examPerspectiveRow{
		  display:none;
		}

		/** OLD STUFF */


		#ggbPage {
		  background-color: #ffffff;
		}

		#ggbsplash {
		  text-align:center;
		  position:absolute;
		  left:0px;
		  top:0px;
		  width:100%;
		}

		div.SymbolTablePopup{
		  z-index:501;
		}

		.perspImage{
			width:24px;
			height:24px;
		}
    </style>
</head>
<body dir="ltr" tabindex="-1" onload="loadApp()">
	<div id="ggbPage" style="display:none; background-color:#FFFFFF;position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;">

    <div id="ggbHeader" class="GeoGebraFrame">
        <div class="startScreen toolbarPanel">
            <div class="toolBPanel graphics">
			<ul>
			<li class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li>
				  <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li>
				 <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li> <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li> <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li> <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li> <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li>
				 <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li> 
				 <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li>
				 <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li>
				 <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li>
				 </ul>
            </div>
			<div class="toolBPanel cas">
			<ul>
			<li class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li>
				  <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li>
				 <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li> <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li> <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li> <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li>
				 <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li> 
				 <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li>
				 <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li>
				 <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li>
				  <li  class="toolbar_item">
                 <div class="toolbar_button" style="border-width: 1px;">
				 <img src="" class="gwt-Image toolbar_icon" draggable="false" style="width: 32px;">
				 </div>
				 </li>
				 </ul>
            </div>
            <div class="rightButtonPanel startScreen">
            
            <img src="" class="gwt-Image" draggable="false" style="width: 32px;">
            
            
            <img src="" class="gwt-Image" draggable="false" style="width: 32px;">
            </div>
        </div>
    </div>
    
    <div class="ggbPageContent GeoGebraFrame startScreen" id="appsPicker">
	<div class="gwt-DialogBox DialogBox GeoGebraFrame perspectivesBox" id="perspectivesBox" style="right: 0px; top: 101px; position: absolute; overflow: visible;">
    	<div class=""><table  class=""><tbody>
		<tr class="dialogTop"><td class="dialogTopLeft"><div class="dialogTopLeftInner"></div></td><td class="dialogTopCenter"><div class="dialogTopCenterInner">
		<div class="Caption perspectivesCaption"><span id="create">GeoGebra Classic</span>
		<a id="tutorialLink" href="#" target="_blank" style="padding: 5; line-height: 30px;"><img src="" class="gwt-Image perspectivesHelp" draggable="false" style="width: 24px;height: 24px;"></a>
</div></div></td><td class="dialogTopRight"><div class="dialogTopRightInner"></div></td></tr>
		<tr class="dialogMiddle"><td class="dialogMiddleLeft"><div class="dialogMiddleLeftInner"></div></td><td class="dialogMiddleCenter"><div class="dialogMiddleCenterInner dialogContent"><div class="perspectivesMainPanel">

		<table  class="perspectivesRow"><tbody><tr><td align="left" style="vertical-align: top;">
		<img src="" class="perspImage"></td><td align="left" style="vertical-align: top;">
		<div class="gwt-Label" id="graphing">Graphing Calculator</div></td></tr></tbody></table>

		<table  class="perspectivesRow"><tbody><tr><td align="left" style="vertical-align: top;">
		<img src="" class="perspImage"></td><td align="left" style="vertical-align: top;">
		<div class="gwt-Label" id="geometry">Geometry</div></td></tr></tbody></table>

		<table  class="perspectivesRow"><tbody><tr><td align="left" style="vertical-align: top;">
		<img src="" class="perspImage"></td><td align="left" style="vertical-align: top;">
		<div class="gwt-Label" id="perspective3d">3D Graphics</div></td></tr></tbody></table>

		<table  class="perspectivesRow"><tbody><tr><td align="left" style="vertical-align: top;">
		<img src="" class="perspImage"></td><td align="left" style="vertical-align: top;">
		<div class="gwt-Label" id="cas">CAS</div></td></tr></tbody></table>

		<table  class="perspectivesRow"><tbody><tr><td align="left" style="vertical-align: top;">
		<img src="" class="perspImage"></td><td align="left" style="vertical-align: top;">
		<div class="gwt-Label" id="spreadsheet">Spreadsheet</div></td></tr></tbody></table>

		<table  class="perspectivesRow"><tbody><tr><td align="left" style="vertical-align: top;">
		<img src="" class="perspImage"></td><td align="left" style="vertical-align: top;">
		<div class="gwt-Label" id="probability">Probability</div></td></tr></tbody></table>


		<table class="perspectivesRow examPerspectiveRow" style="display:none"><tbody><tr><td align="left" style="vertical-align: top;">
		<img src="" class="perspImage"></td><td align="left" style="vertical-align: top;">
		<div class="gwt-Label" id="exam">Exam</div></td></tr></tbody></table>


		<table  class="perspectivesRow upperBorder"><tbody><tr><td align="left" style="vertical-align: top;">
		<img src="" class="gwt-Image"></td><td align="left" style="vertical-align: top;">
		<div class="gwt-Label" id="tutorials">Tutorials</div></td></tr></tbody></table>

		</div></div></td><td class="dialogMiddleRight"><div class="dialogMiddleRightInner"></div></td></tr><tr class="dialogBottom"><td class="dialogBottomLeft"><div class="dialogBottomLeftInner"></div></td><td class="dialogBottomCenter"><div class="dialogBottomCenterInner"></div></td><td class="dialogBottomRight"><div class="dialogBottomRightInner"></div></td></tr></tbody></table></div>
    </div>
	</div>
	
<script type="text/javascript">
    //TODO add this to html
    if (module == "web3d" && !defaultParams.laf) {
        document.getElementsByClassName("upperBorder")[0].outerHTML = '<div class="storeIconHolder"><div class="separatorDiv"></div>'+
        '<a class="gwt-Anchor" target="_blank" href="https://play.google.com/store/apps/details?id=org.geogebra.android">'+
        		'<div class="downloadimg"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/><path d="M0 0h24v24H0z" fill="none"/>'+
'</svg></div><span id="download" class="downloadlink">Download</span></a>'+
        '</div>';
    }
    // only show  exam in tablet and offline apps
    if (module.indexOf("tablet") === 0 || defaultParams.laf == "bundle" || defaultParams.laf == "chrome") {
        document.getElementsByClassName("examPerspectiveRow")[0].style.display = "";
    }
</script>

<div class="startScreen splitter">
<div class="gwt-SplitLayoutPanel-HDragger" style="width: 8px; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
</div></div>

<div class="gwt-TreeItem NewRadioButtonTreeItemParent startScreen" role="treeitem" >
<div class="latexEditor" style="min-height: 59px;">
</div></div>

</div>
    <article id="ggw"
    data-param-useBrowserForJS="false"
    data-param-app="true" data-param-showAppsPicker="true" ></article>
</body>
<script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-analytics.js"></script>

<script>
var firebaseConfig = {
    apiKey: "AIzaSyDg3hfaFLUKQDJCRRrTnTIshxxgyAUzPuU",
    authDomain: "geogebra-ggb.firebaseapp.com",
    databaseURL: "https://geogebra-ggb.firebaseio.com",
    projectId: "geogebra-ggb",
    storageBucket: "geogebra-ggb.appspot.com",
    messagingSenderId: "895270214636",
    appId: "1:895270214636:web:3c05deeefcd1a96584fec9",
    measurementId: "G-8JGZQG6FHG"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>

</html>